<template>
  <div class="style">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-col :span="6">
          <el-form-item label="房号:" >
            <el-input class="input" v-model="formInline.fanghao" placeholder="请输入房号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态:">
            <el-select class="input" v-model="formInline.danyuan" placeholder="请选择押金状态">
              <el-option label="待收" value="待收"></el-option>
              <el-option label="已收" value="已收"></el-option>
              <el-option label="已退" value="已退"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物业类型:">
            <el-select class="input" v-model="formInline.type" placeholder="请输入物业类型">
              <el-option label="写字楼" value="写字楼"></el-option>
              <el-option label="公寓" value="公寓"></el-option>
              <el-option label="商铺" value="商铺"></el-option>
              <el-option label="高层住宅" value="高层住宅"></el-option>
              <el-option label="洋房" value="洋房"></el-option>
              <el-option label="别墅" value="别墅"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item id="btn">
          <el-button type="primary" class="btn" @click="onSearch">查询</el-button>
        </el-form-item>
        <el-form-item id="btn">
          <el-button type="info" class="btn" @click="onResize">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style='headerstyle'>
        <el-table-column prop="deposit_id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="deposit_hth" label="租赁合同号" width="180">
        </el-table-column>
        <el-table-column prop="deposit_fh" label="房号" width="180">
        </el-table-column>
        <el-table-column prop="deposit_dy" label="楼栋单元" width="180">
        </el-table-column>
        <el-table-column prop="deposit_zh" label="租户" width="180">
        </el-table-column>
        <el-table-column prop="deposit_lx" label="物业类型" width="180">
        </el-table-column>
        <el-table-column prop="deposit_yj" label="押金金额" width="180">
        </el-table-column>
        <el-table-column prop="deposit_zt" label="状态" width="170">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if='scope.row.deposit_zt=="待收"' type="text" @click="checkDetail(scope.row)">{{caozuo.shoukuan}}</el-button>
            <el-button v-else-if="scope.row.deposit_zt=='已收'" type="text" @click="checkTui(scope.row)">{{caozuo.tuikuan}}</el-button>
            <el-button v-else type="text"> {{caozuo.yitui}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情弹框 -->
    <el-dialog title="立即缴费" class="aaa" :visible.sync="shoukVisible">
      <el-descriptions class="des" :column='2' :colon='false'>
        <el-descriptions-item label="房号:">{{tableData2.deposit_fh}}</el-descriptions-item>
        <el-descriptions-item label="租户">{{tableData2.deposit_zh}}</el-descriptions-item>
        <el-descriptions-item label="押金:">{{tableData2.deposit_yj}} 元/月</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div>
        <h3>支付方式</h3>
        <el-radio v-model="radio" label="1">微信</el-radio>
        <el-radio v-model="radio" label="2">支付宝</el-radio>
      </div>
      <el-button type="primary" @click="jiaofei" class="btn3">确 定</el-button>
    </el-dialog>

    <el-dialog title="退款处理" class="aaa" :visible.sync="tuikVisible">
      <el-descriptions class="des" :column='2' :colon='false'>
        <el-descriptions-item label="房号:">{{tableData2.deposit_fh}}</el-descriptions-item>
        <el-descriptions-item label="租户">{{tableData2.deposit_zh}}</el-descriptions-item>
        <el-descriptions-item label="押金:">{{tableData2.deposit_yj}} 元/月</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div>
        <h3>支付方式<span class="tui">退款后，金额将会原路返回</span></h3>
        <el-radio v-model="radio" label="1">微信</el-radio>
        <el-radio v-model="radio" label="2">支付宝</el-radio>
      </div>
      <el-button type="primary" @click="tuikuan" class="btn3">确认退款</el-button>
    </el-dialog>
    <div>
      <page class="page" />
    </div>
  </div>

</template>

<script>
import Event from "../../utils/Event.js";
import page from '../../components/page.vue'
export default {
  methods: {
    //表头颜色
    headerstyle() {
      return 'background:#FAFAFA'
    },

    // 查询
    onSearch() {
      //只查房号
      if (this.formInline.fanghao && this.formInline.danyuan == '' && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].deposit_fh) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有房号，加状态
      else if (this.formInline.fanghao != '' && this.formInline.danyuan && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].deposit_fh
            && this.formInline.danyuan == this.toltable[i].deposit_zt

          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有房号，加类型
      else if (this.formInline.fanghao != '' && this.formInline.danyuan == '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].deposit_fh
            && this.formInline.type == this.toltable[i].deposit_lx
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有类型，加状态
      else if (this.formInline.fanghao == '' && this.formInline.danyuan != '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.type == this.toltable[i].deposit_lx
            && this.formInline.danyuan == this.toltable[i].deposit_zt
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //三个查
      else if (this.formInline.fanghao != '' && this.formInline.danyuan != '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].deposit_fh
            && this.formInline.danyuan == this.toltable[i].deposit_zt
            && this.formInline.type == this.toltable[i].deposit_lx
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //只查类型
      else if (this.formInline.fanghao == '' && this.formInline.danyuan == '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.type == this.toltable[i].deposit_lx) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //只查状态
      else if (this.formInline.fanghao == '' && this.formInline.danyuan && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.danyuan == this.toltable[i].deposit_zt) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      else {
        this.getuser()
      }
    },
    // 重置
    onResize() {
      this.formInline.fanghao = ''
      this.formInline.danyuan = ''
      this.formInline.type = ''
      this.inputarr = []
      this.getuser()
    },
    //shoukuan
    checkDetail(val) {
      this.shoukVisible = true;
      this.tableData2 = val
    },
    //退款
    checkTui(val) {
      this.tuikVisible = true;
      this.tableData2 = val
    },
    //收款确认
    jiaofei() {
      let fh = this.tableData2.deposit_fh;
      let zt = this.tableData2.deposit_zt;
      if (zt == '待收') {
        zt = '已收'
      } else if (zt == '已收') {
        zt = '已退'
      }
      (zt);
      this.$axios({
        url: '/charge/depositChange',
        method: 'post',
        data: {
          fh: fh,
          zt: zt
        }

      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '缴费成功!',
          });
          this.shoukVisible = false,
            this.getuser()
        }
      }).catch((res) => {
        if (res.data.code == 500) {
          this.$message({
            type: 'info',
            message: '缴费失败'
          });
          this.shoukVisible = false,
            this.getuser()
        }
      });
    },
    tuikuan() {
      let fh = this.tableData2.deposit_fh;
      let zt = this.tableData2.deposit_zt;
      if (zt == '已收') {
        zt = '已退'
      }
      (zt);
      this.$axios({
        url: '/charge/depositChange',
        method: 'post',
        data: {
          fh: fh,
          zt: zt
        }

      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '退款成功!',
          });
          this.tuikVisible = false,
            this.getuser()
        }
      }).catch((res) => {
        (res);
        if (res.data.code == 500) {
          this.$message({
            type: 'info',
            message: '退款失败'
          });
          this.tuikVisible = false,
            this.getuser()
        }
      });
    },
    //获取
    getuser: function () {
      this.$axios({
        url: '/charge/depositSel'
      }).then((res) => {
        //(res);
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData;
        //(v);
      })
    }
  },
  created() {
    this.getuser();
  },
  mounted() {
    this.receive();
  },
  beforeUpdate() {
    this.receive();
  },
  data() {
    return {
      caozuo: {
        tuikuan: '退款',
        shoukuan: '收款',
        yitui: '——'
      },
      textarea: '',
      inputarr: [],
      formInline: {
        fanghao: '',
        danyuan: '',
        type: ''
      },
      tableData2: [],
      tableData3: [],
      formLabelWidth: '120px',
      shoukVisible: false,
      tuikVisible: false,
      tableData: [],
      radio: '1',
    }
  },
  components: { page },
}
</script>
<style scoped>
.style {
  padding: 50px;
  margin-top: 20px;
}
.page {
  text-align: center;
  margin-top: 30px;
}
.el-table {
  padding-left: 18px;
}
.input {
  width: 280px;
  margin: 0 5px;
}
.btn {
  margin: 0 22px;
}
.btn2 {
  height: 15px;
  width: 30px;
  text-align: center;
  padding-bottom: 5px;
}
.des {
  margin: 20px 20px;
}
.btn3 {
  margin: 30px 30px;
  width: 200px;
}
h3 {
  padding: 10px 0 20px 0;
}
.desc {
  margin: 5px 60px;
}
.el-radio {
  margin-left: 30px;
}
.tui {
  font-size: 12px;
  margin-left: 10px;
  color: #999;
}
</style>
<style>
.aaa .el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>